body {
    // width: 97vw;
    background-color:#F4F4F4;
    // padding: 3vw;
}
.top,.bottom {
    display: flex;
    margin-top: 10vw;
    width: 100%;
    height: 15vw;
    .previous {
        flex: 2;
        margin-left: 5vw;
        background: rgb(155, 149, 149) url(../image/previousPage.png) no-repeat center;
        background-size: 12vw ;
        border-radius: 2vw;

    }
    .mode {
        flex: 1;
        margin: 0 7vw;
        background-size: cover;
        background-color: rgb(155, 149, 149);
        border-radius: 2vw;
    }
    .next {
        flex: 2;
        margin-right: 5vw;
        transform: rotateY(180deg);
        background: rgb(155, 149, 149) url(../image/previousPage.png) no-repeat center;
        background-size: 12vw ;
        border-radius: 2vw;
    }
}
.content {
    margin-top: 8vw;
    .title {
        font-size: (38/700)*100vw;
        font-weight: 600;
        margin: 0 3vw;
    }
    .text {
        margin: 0 3vw;
        font-size: (30/700)*100vw;
    }
}
.bottom {
    margin-bottom: 10vw;
}
.sun {
    background: url(../image/moon.png);
}
.moon {
    background: url(../image/sun.png);
}
.book {
    display: flex;
    width: 100%;
    height: 10vw;
    background-color: rgb(155, 149, 149);
    align-items: center;
    .back {
        display: inline-block;
        margin-right: 2vw;
        width: 10vw;
        height: 10vw;
        background: url("../image/back.png");
        background-size: 10vw;
    }
    .book-name {
        line-height: 10vw;
        font-size: (40/700)*100vw;
        font-weight: 700;
    }
}